Laravel Livewire Image Upload with Preview

2024-01-09 18:39| 来源: 网络整理| 查看: 265

Video Tutorial:

Hello friends, in this blog, we would like to show you laravel 8 livewire image upload with preview example. We will give you simple example of how to upload image with preview in laravel 8.

So, let's follow few step to create example of laravel 8 livewire image upload with preview tutorial.

You just need to follow few step and you will get basic crud stuff using livewire component, model, route, bootstrap 4 and blade.

Now lets start,

Step 1: Create Laravel 8 Projectcomposer create-project --prefer-dist laravel/laravel LivewireImageUpload

or,

laravel new LivewireImageUpload

Step 2: Install Livewire in this Project

composer require livewire/livewire

Step 3: Database Configuration

Now we will make database configuration for example database name, username, password etc for our crud application of laravel 8 livewire. So let's open .env file and fill all details like as bellow:

.env

DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=nzcoding_livewireimageupload DB_USERNAME=root DB_PASSWORD=

Step 4: Make Student Model & Migration

php artisan make:model Image -m

go to database/migrations/image_table_migration & in up() function add the code

Schema::create('images', function (Blueprint $table) { $table->id(); $table->string('image')->nullable(); $table->timestamps(); });

Now, migrate the migration

php artisan migrate

Step 5: Make Livewire Component

make base layout component

php artisan make:livewire layouts/base

make ImageUpload Component

php artisan make:livewire ImageUploadComponent

Step 6: Add Get Route

Here, we need to add get route for image upload application. so open your "routes/web.php" file and add following route.

routes/web.php

use App\Http\Livewire\ImageUploadComponent; use Illuminate\Support\Facades\Route; Route::get('image-upload', ImageUploadComponent::class);

Step 7: Filesystems.php Configuration

go to config/filesystems.php and change your local disk path

'local' => [ 'driver' => 'local', 'root' => public_path('uploads'), ],

Step 8: Add the Following Codes

Now, let's copy bellow code and put on StudentsComponent files,

resources/views/livewire/layouts/base.blade.php

NzCoding - Laravel LivewireCRUD {{-- Bootstrap Styles --}} {{-- fontawsome css --}} @livewireStyles body{ background-image: url('assets/images/bg01.png'); } {{ $slot }}

{{-- Bootstrap Scripts --}} @stack('scripts') @livewireScripts

app/Http/livewire/ImageUploadComponent.php

【本文地址】

公司简介

联系我们